<template>
  <el-container>
    <el-header class="header">
      <!-- 命名视图 -->
      <router-view name="header"></router-view>
    </el-header>
    <el-main class="middle">
      <!-- 默认视图 -->
      <router-view></router-view>
    </el-main>
    <el-footer class="footer">
      <!-- 命名视图 -->
      <router-view name="footer"></router-view>
    </el-footer>
  </el-container>
</template>

<script>
import { 
  ElContainer ,
  ElHeader,
  ElMain,
  ElFooter
} from 'element-plus';

export default {
  name:'App',
  components: {
    'el-container': ElContainer,
    'el-header': ElHeader,
    'el-main': ElMain,
    'el-footer': ElFooter
  },
  // 在根组件中采用 provide 方式提供数据
  provide: {
    // 用 students 数组来虚拟一个数据库
    students: [ 
      { id: 1999, account: 'sanfeng' , password: 'hello' , name: '张三丰' }
    ]
  }
}
</script>

<style>
body{
  margin: 0;
  padding: 0;
}
</style>

<!-- 在 style scoped 中设置的样式是组件内私有样式 -->
<style scoped>
.header {
  height: 10vh;
}
.middle {
  height: 80vh;
  background: #dfdfdf;
}
.footer {
  height: 10vh;
}
</style>
